<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生活和日常-小兔鲜儿-新鲜、惠民、快捷！</title>
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
  <!-- icon图标 -->
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <!-- 样式初始化 -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 字体图标 -->
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  <!-- 主页样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 1. 头部导航 -->
  <header>
    <!-- 快捷菜单 -->
    <div class="xtx-shortcut">
      <nav class="w">
        <ul class="top-nav fr">
          <li><a href="./login.html">请先登录</a></li>
          <li><a href="./register.html">免费注册</a></li>
          <li><a href="./order.html">我的订单</a></li>
          <li><a href="./center.html">会员中心</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li class="about"><a href="javascript:;">联系我</a></li>
          <!-- 新窗口打开 -->
          <li class="concern"><a href="javascript:;">关注我</a></li>
          <li><a target="_blank" href="http://mcongblog.com/">我的博客</a></li>
         
        </ul>
      </nav>
    </div>
    <!-- 主导航 -->
    <div class="xtx-main-nav w">
      <!-- logo -->
      <h1 class="xtx-logo fl">
        <a href="javascript:;">小兔鲜儿</a>
      </h1>
      <!-- 顶部导航 -->
      <nav class="fl">
        <ul class="main-nav-font">
          <li>
            <a href="index.html">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </nav>
      <div class="main-search fl">
        <input type="text" placeholder="搜一搜" />
        <div class="car">
          <span>2</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 2. 侧边栏（侧边栏和焦点图） -->
  <aside>
    <!-- 主体部分 -->
    <div class="xtx-banner">
      <div class="w">
        <!-- 焦点图 -->
        <nav class="nav">
          <ul>
            <li class="active"><a href="javascript:;"><img src="./uploads/banner_1.png" alt="" srcset=""></a></li>
            <li><a href="javascript:;"><img src="./uploads/banner_2.jpg" alt="" srcset=""></a></li>
            <li><a href="javascript:;"><img src="./uploads/banner_3.jpg" alt="" srcset=""></a></li>
          </ul>
        </nav>
        <!-- 侧边栏 -->
        <div class="banner-left fl">
          <ul>
            <li>
              <a href="javascript:;">生鲜 水果 蔬菜</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">美食 面点 干果</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">餐厨 数码产品</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">电器 床品 四件套 被枕</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">居家 奶粉 玩具 辅食</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">洗护 洗发 洗护 美妆</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">孕婴 奶粉 玩具</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">服饰 女装 男装</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">杂货 户外 图书</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
            <li>
              <a href="javascript:;">品牌 品牌制造</a>
              <i class=" iconfont icon-arrow-right"></i>
            </li>
          </ul>
        </div>
        <div class="banner-right fl">
          <a href="javascript:;" class="prev"><i class="iconfont icon-arrow-left"></i></a>
          <a href="javascript:;" class="next"><i class="iconfont icon-more1"></i></a>
          <!-- 焦点图小圆点 -->
          <ul class="paging">
            <li class="active"></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </aside>

  <!-- 3. 网页主体 -->
  <section class="section">
    <!-- 3.1. 新鲜好物 -->
    <div class="xtx-fresh w new">
      <!-- 新鲜好物 -->
      <div class="xtx-font fl">
        <h3 class="fl">新鲜好物</h3>
        <p class="fl">新鲜出炉 品质靠谱</p>
        <a href="javascript:;" class="fr">查看全部 &gt;</a>
      </div>
      <!-- 新鲜好物列表 -->
      <div class="xtx-commodity fl">
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <p class="font">睿米无线吸尘器F8</p>
            <p class="price">￥899</p>
            <div class="new">新品</div>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/new_goods_2.jpg" alt="">
            <p class="font">智能环绕3D空调</p>
            <p class="price">￥1299</p>
            <div class="new">新品</div>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/new_goods_3.jpg" alt="">
            <p class="font">广东软软糯米煲仔饭</p>
            <p class="price">￥129</p>
            <div class="new">新品</div>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/new_goods_4.jpg" alt="">
            <p class="font">罗西机械智能手表</p>
            <p class="price">￥3999</p>
            <div class="new">新品</div>
          </a>
        </div>
      </div>
    </div>
    <!-- 3.2. 人气推荐 -->
    <div class="xtx-fresh w popular">
      <!-- 人气推荐 -->
      <div class="xtx-font fl">
        <h3 class="fl">人气推荐</h3>
        <p class="fl">人气爆款 不容错过</p>
      </div>
      <!-- 人气推荐列表 -->
      <div class="xtx-recommend fl">
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/popular_1.jpg" alt="">
            <p class="font">特惠推荐</p>
            <p class="describe">我猜得到 你的需要</p>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/popular_2.jpg" alt="">
            <p class="font">爆款推荐</p>
            <p class="describe">人气好物推荐</p>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/popular_3.jpg" alt="">
            <p class="font">场景使用一站买全</p>
            <p class="describe">编辑精心整理推荐</p>
          </a>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./uploads/popular_4.jpg" alt="">
            <p class="font">领券中心</p>
            <p class="describe">发现更多超值优惠券</p>
          </a>
        </div>
      </div>
    </div>
    <!-- 3.3. 热门品牌 -->
    <div class="xtx-hot brand">
      <div class="w">
        <div class="hot-left fl">
          <h3 class="fl">热门品牌</h3>
          <p class="fl">国际经典 品质保障</p>
        </div>
        <div class="hot-right fr">
          <p>&lt;</p>
          <p>&gt;</p>
        </div>
        <div class="img fl">
          <a href="javascript:;">
            <img src="./uploads/brand_goods_1.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./uploads/brand_goods_2.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./uploads/brand_goods_3.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./uploads/brand_goods_4.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./uploads/brand_goods_5.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
    <!-- 3.4. 生鲜 -->
    <div class="xtx-seafood w topic clearfix">
      <div class="seafood-font fl">
        <h3>生鲜</h3>
        <ul class="seafood-list">
          <li>
            <a href="javascript:;">水果</a>
          </li>
          <li>
            <a href="javascript:;">蔬菜</a>
          </li>
          <li>
            <a href="javascript:;">肉禽蛋</a>
          </li>
          <li>
            <a href="javascript:;">裤装</a>
          </li>
          <li>
            <a href="javascript:;">衬衫</a>
          </li>
          <li>
            <a href="javascript:;">T恤</a>
          </li>
          <li>
            <a href="javascript:;">内衣</a>
          </li>
        </ul>
        <a href="javascript:;" class="all">查看全部 &gt;</a>
      </div>
      <div class="seafood-pic fl">
        <div class="seafoot-left fl">
          <a href="javascript:;">
            <img src="./uploads/fresh_goods_cover.png" alt="茅台酒" title="美味茅台">
          </a>
        </div>
        <div class="seafoot-right fl">
          <div class="item fl">
            <img src="./uploads/fresh_goods_1.jpg" alt="">
            <p class="brief">美威 智利原味三文鱼排</p>
            <p class="brief">240g/袋 4片装</p>
            <p class="brief">海鲜年货</p>
            <p class="price">￥59</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_2.jpg" alt="">
            <p class="brief">红功夫 麻辣小龙虾1.5kg</p>
            <p class="brief"> 4-6钱/25-32只</p>
            <p class="brief">火锅食材 </p>
            <p class="price">￥79</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_3.jpg" alt="">
            <p class="brief">三都港 冷冻无公害黄花鱼</p>
            <p class="brief"> 700g 2条 袋装</p>
            <p class="brief">海鲜水产</p>
            <p class="price">￥49</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_4.jpg" alt="">
            <p class="brief">渔公码头 大连鲜食入味</p>
            <p class="brief">即食海参 辽参刺参 </p>
            <p class="brief">调味海</p>
            <p class="price">￥899</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_5.jpg" alt="">
            <p class="brief">渔公码头 大连鲜食入味</p>
            <p class="brief">即食海参 辽参刺参 </p>
            <p class="brief">调味海</p>
            <p class="price">￥59</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_6.jpg" alt="">
            <p class="brief">渔公码头 大连鲜食入味</p>
            <p class="brief">即食海参 辽参刺参 </p>
            <p class="brief">调味海</p>
            <p class="price">￥79</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_7.jpg" alt="">
            <p class="brief">渔公码头 大连鲜食入味</p>
            <p class="brief">即食海参 辽参刺参 </p>
            <p class="brief">调味海</p>
            <p class="price">￥49</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>
          <div class="item fl">
            <img src="./uploads/fresh_goods_8.jpg" alt="">
            <p class="brief">渔公码头 大连鲜食入味</p>
            <p class="brief">即食海参 辽参刺参 </p>
            <p class="brief">调味海</p>
            <p class="price">￥899</p>
            <div class="find fl">
              <p class="one">
                <a href="javascript:;">找相似</a>
              </p>
              <p class="two">
                <a href="javascript:;">发现更多宝贝 &gt;</a>
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 3.5. 电梯导航 -->
    <aside class="xtx-elevator w">
      <ul>
        <li><a href="javascript:;" data-name="new">新鲜好物</a></li>
        <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
        <li><a href="javascript:;" data-name="brand">热门品牌</a></li>
        <li><a href="javascript:;" data-name="topic">最新专题</a></li>
        <li><a href="javascript:;" class="backTop">回到顶部</a></li>
      </ul>
    </aside>
  </section>

  <!-- 4. 底部 -->
  <footer>
    <div class="xtx-footer w">
      <!-- 客户服务 -->
      <div class="footer-server fl">
        <p>客户服务</p>
        <div class="service">在线客服</div>
        <div class="question">问题反馈</div>
      </div>
      <!-- 关注我们 -->
      <div class="footer-we fl">
        <p>关注我们</p>
        <div class="number">公众号</div>
        <div class="weibo">微博</div>
      </div>
      <!-- 下载APP -->
      <div class="footer-download fl">
        <p>下载APP</p>
        <div class="code">
          <img src="./uploads/qrcode.png" alt="">
        </div>
        <div class="download">
          <p>扫秒二维码</p>
          <br />
          <p>立即下载APP</p>
          <a href="javascript:;">立即下载</a>
        </div>
      </div>
      <!-- 服务热线 -->
      <div class="footer-hotline fr">
        <p>服务热线</p>
        <div class="num">400-0000-000</div>
        <span>周一至周日 8:00-18:00</span>
      </div>
    </div>

    <div class="xtx-bottom">
      <div class="w">
        <div class="bottom-service">
          <div class="bottom-box">
            <a href="javascript:;">价格亲民</a>
            <a href="javascript:;">物流快捷</a>
            <a href="javascript:;">品质新鲜</a>
          </div>
        </div>
        <div class="bottom-copyright">
          <ul>
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">帮助中心</a></li>
            <li><a href="javascript:;">售后服务</a></li>
            <li><a href="javascript:;">配送与验收</a></li>
            <li><a href="javascript:;">商务合作</a></li>
            <li><a href="javascript:;">搜索推荐</a></li>
            <li><a target="_blank" href="http://mcongblog.com/">友情链接</a></li>
          </ul>
          <p>CopyRight © A Lucky Boy 版权所有 
            <a class="copy-right" style="color: #999;" target="_blank" href="https://beian.miit.gov.cn/">豫ICP备2021028593号</a>
          </p>
        </div>
      </div>
    </div>
  </footer>

  <script src="./js/index.js"></script>
  <!-- 用户登录模块 -->
  <script src="./js/common.js"></script>
</body>
</html>